<template>
   <user-card-list :userList="userList"/>
    <!-- 通用错误 -->
    <van-empty v-if="!userList || userList.length < 1" image="error" description="搜索为空" />


</template>

<script setup>
import {onMounted, ref} from 'vue';
import myAxios from "../plugins/myAxios.ts";
import {useRoute} from "vue-router";
import {showToast} from "vant";
import qs from "qs";
import UserCardList from "../components/UserCardList.vue";


const route = useRoute();
const {tags} = route.query;

const userList = ref([]);
onMounted(async () => {
    const userDataList = await myAxios.get('/user/search/tags', {
        params: {
            tagNameList: tags,
        },
        paramsSerializer: params => {
            return qs.stringify(params, {indices: false})
        }
    })
        .then(function (response) {
            showToast("请求成功");

            return response.data;

        })
        .catch(function (error) {
            showToast("请求失败");


        });
    if (userDataList) {
        userDataList.forEach(user => {
            if(user.tags){
                user.tags = JSON.parse(user.tags)
            }
        })
        userList.value = userDataList;
        showToast("请求成功！！！")
    }

})

</script>

<style scoped>

</style>